// 消息列表
<template>
 <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div>
       
        <div class="top5">
            <van-nav-bar title="充值" left-text="返回" left-arrow :fixed='true' @click-left="onClickLeft" :border='false'>
            <van-icon name="arrow-left" slot="left" color="black" size="0.4rem" />
            </van-nav-bar>
        </div>
        <div class="box15">
          <h1><img src="https://img.yzcdn.cn/vant/cat.jpeg" alt=""></h1>
          
        </div>
        <div class="wcontent5">
            <p>
                <span>余额(元)</span>
                <strong >{{num}}</strong>
            </p>
            <form class="fom" action="">
                <label class="labe5" for=""><van-icon name="gold-coin" size="0.6rem"/></label>
                <input type="text"  value="0" placeholder="输入充值金额" class="ipt5" v-model="ipt">
            </form>
        </div>
        <div class="wbig5">
            <h2>
                <li v-for="(item) in list" v-bind:key="item.id">
                    <van-button class="btn" @click="send($event)" type="info" size='small'>{{item}}</van-button>
                </li>
            </h2>
            <h2>
               <li v-for="(item) in list1" v-bind:key="item.id">
                   <van-button class="btn" @click="send($event)" type="info" size='small'>{{item}}</van-button>
                </li>
            </h2>
            <h1><van-button type="primary" size="large" @click="tap()">去充值</van-button></h1>
            <p>点击去充值，即已同意《充值协议》。余额不可提现、转增、退还。</p>
        </div>
        
    </div>
</van-pull-refresh>
</template>
<script>
    export default{
        data(){
            return{
               isLoading: false,
               num:10,
               ipt:'',
               list:[50,100,200],
               list1:[500,1000,2000]
            }
        },
         
        methods:{
            onClickLeft(){
				this.$router.go(-1)
            },
             send(event){
                this.ipt = parseInt(event.path[1].innerText)
            },
            tap(){
                console.log(this.ipt)
                if(this.ipt==''||this.ipt==null){
                    this.ipt=0
                }
                this.num = parseInt(this.num)+parseInt(this.ipt)
               
                this.ipt=null
               
            },
             onRefresh() {
            setTimeout(() => {
                this.$toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 500);
            }
        },
        computed:{
            
        },
    }

</script>


<style scoped>
    /* *{margin: 0 ;padding:0;} */
    .top5{border-bottom:3px solid rgba(99, 96, 96, 0.034);margin-top: 1.2rem;}
    .box15{display: flex;flex-direction: column;border-bottom:1px solid #ccc;margin: 1% 12%}
    .box15 img{width: 7.5rem;height: 5rem}
    .wcontent5{display: flex;justify-content: space-between;margin: 7%;align-items: center}
    .wcontent5 p{display: flex;flex-direction: column;}
    form{border: 1px solid #ccc;width: 4.2rem;height: 0.67rem;display: flex;line-height: 0.7rem}
    form .ipt5{width: 3rem;border: 0;height:0.6rem;padding-left: 0.75rem;}
    .labe5{width: 0.1rem;}
    .wbig5{margin: 7%;}
    .wbig5 h2{display: flex;justify-content: space-between;margin-top: 3%}
    .wbig5 h1{margin-top: 6%}
    .wbig5 p{font-size: 14px;text-align: left;margin-top: 5%;}
</style>
